<template>
	<view class="doormanIndex">
		<!-- <SearchVue/> -->
		<scroll-view scroll-y="true" style="height: 100%;">
		<view class="funSort">
			<view class="fun_items"  v-for="(item,index) in staffFunList" :key="index" @click="skipDetail(item.path)">
				<view class="topTitle" v-if="!isPhone">
					<text >{{item.label}}</text>
				</view>
				<image :src="`../../static/image/doorman/0${index + 1}.png`" mode=""></image>
				<text v-if="isPhone">{{item.label}}</text>
				<view class="toSeeDetail" v-if="!isPhone">
					点击查看
				</view>
			</view>
		</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import SearchVue from '../../component/Search.vue';
	import {isDeviceType} from '@/hooks/deviceType.js'
	const isPhone = ref(isDeviceType('phone'))
	const staffFunList = [
		{label:"当日未出",path:"/packageLeaveDate/pages/mwNoRelease/mwNoRelease"},
		{label:"当日未归",path:"/packageLeaveDate/pages/mwNoReturn/mwNoReturn"},
		{label:"所有外出人员",path:"/packageLeaveDate/pages/mwAllrelease/mwAllrelease"},
		{label:"进院确认",path:"/packageVisite/pages/mwEntering/mwEntering"},
		{label:"离院确认",path:"/packageVisite/pages/mwLeaving/mwLeaving"},
		{label:"临时登记",path:"/packageVisite/pages/mwTemporary/mwTemporary"}]
		const skipDetail = (url)=>{
			uni.navigateTo({
				url
			})
		}
</script>
<style lang="less" scoped> 
.doormanIndex{
	.funSort{
		margin-top: 52rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	.fun_items{
			width: 332rpx;
			height: 332rpx;
			background: rgba(255,255,255,0.7);
			border: 2rpx solid #FFFFFF;
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			>image{
				width: 92rpx;
				height: 92rpx;
				margin-bottom: 20rpx;
			}
			>text{
				font-weight: 400;
				font-size: 32rpx;
				color: #3B3B3B;
			}
	}	
	}

}
@media screen and (min-width: 768px) {
	.doormanIndex{
		height: 74vh;
		padding: 0 30rpx;
		.funSort{
		.fun_items{
			height: auto;
			padding: 28rpx;
			background: linear-gradient( 180deg, rgba(255,255,255,0.8) 0%, rgba(188,217,252,0.8) 100%);
			border-radius: 30rpx;
			width: 32%;
			margin-bottom: 50rpx;
			.topTitle{
				width: 100%;
				>text{
					text-align: left;
					font-weight: 400;
					font-size: 54rpx;
					color: #3B3B3B;
				}
			}
			>image{
				width: 300rpx;
				height: 300rpx;
				margin: 60rpx auto 30rpx;
			}
			>text{
				font-size: 60rpx;
			}

			.toSeeDetail{
				height: 120rpx;
				font-size: 60rpx;
				background: linear-gradient( 180deg, #8072f2 0%, #147FF3 100%);
				padding: 0 120rpx;
				border-radius: 120rpx;
				color: #FFFFFF;
				line-height: 120rpx;
				margin: 70rpx 0 100rpx;
			}
		}	
		}

	}
}
</style>